
@include('Home.head')

<style>
	.am-header-title a{
		color: #ffffff;
	}
	.am-navbar-nav a .am-navbar-label{
		font-size: 14px;
		margin-top: 6px;
	}
	.am-navbar{
		height: 60px;
	}
	.posre {
		position: relative;
	}
	#codeas {
		height: 26px;
		position: absolute;
		right: 7px;
		top: 7px;
		text-align: center;
		line-height: 28px;
		font-size: 12px;
		color: #333;
	}
	.yz-code {
		display: block;
		border-radius: 25px;
		border: 1px solid #e0e0e0;
		background: #e0e0e0;
		width: 100px;
	}
	.deepBrown {
		background: #FFFFFF;
		border: 0;
	}
	.daad {
		font-size: 0;
	}
</style>

<body>
<div class="container" id="app">
    @include('Home.member.header')
    <div class="my-nav-bar">
    	<ol class="am-breadcrumb">
          <li><a href="#">首页</a></li>
          <li><a href="#">提现</a></li>
        </ol>
    </div>
	<div class="cart-panel">
        <div class="gray-panel">
            {{--<div class="my-search-title-panel am-text-sm am-margin-bottom-sm"><i class="am-icon-lightbulb-o am-text-danger"></i> 提示：实际的运费可能因为收货地址的不同而有差异，具体以提交之后系统计算或卖家协商为准</div>--}}
            <div class="paoduct-title-panel">
                <form class="am-form am-form-inline">
                   <!-- <div class="am-form-group"> -->
                        <!-- <h3>币种</h3> -->
                        <!-- 可提现余额：<span class="red">￥{{ Session::get('home_user')->credit2}}</span> -->
                    <!-- </div> -->
					
					<!-- <div class="am-form-group am-form-icon">
						<labe>提现金额：</labe>
					    <input type="text" v-model="" class="am-form-field am-radius" placeholder="最少体现金额100">
					</div>
					
					<div class="am-form-group am-form-icon">
						<labe>银行姓名：</labe>
					    <input type="text" v-model="" class="am-form-field am-radius" placeholder="如:支付宝,农业银行">
					</div>
					
					<div class="am-form-group am-form-icon">
						<labe>收款账号：</labe>
					    <input type="text" v-model="" class="am-form-field am-radius" placeholder="如:支付宝账号,农业银行账号">
					</div>
					
					<div class="am-form-group am-form-icon">
						<labe>开户名：</labe>
					    <input type="text" v-model="" class="am-form-field am-radius" placeholder="开户人姓名">
					</div> -->
                    <!-- <div class="am-form-group">
                        <div v-show="bank != ''">
                            <select name="" v-model="user.bank">
                                <option value="0">选择提现银行</option>
                                <option  v-for="val in bank" :value="val.id">@{{ val.bank_name }}</option>
                            </select>
                        </div>
                        <div  v-show="bank == ''"  class="withdrawals-panel"><span class="am-fr"><a class="am-text-success" href="/home/member/bank"><span class="am-fr am-icon-chevron-right"></span>添加银行卡</a></span>请管理您的收款银行，以便提现</div>
                    </div> -->
					
                   <!-- <div class="am-form-group am-form-icon">
                        <i class="am-icon-yen"></i>
                        <input type="text" v-model="user.money" class="am-form-field am-radius" placeholder="提现金额 必须是整数">
                    </div> -->
					
					<div class="am-form-group">
{{--					    <label class="am-radio-inline">--}}
{{--							 <input type="radio" v-model="user.withdrawal_type" name="type" value="1"> 电子积分--}}
{{--					    </label>--}}
						<label class="am-radio-inline">
							<input type="radio" v-model="user.withdrawal_type" name="type" value="2"> 奖金积分
						</label>
						<!-- <label class="am-radio-inline">
							 <input type="radio" v-model="user.withdrawal_type" name="type" value="3"> 折扣积分
						</label> -->
					</div>
					
					
					<div  class="am-form-group am-form-icon">
						<!-- <i class="am-icon-yen" style="padding-top: 13px;"></i> -->
						<span>提现金额：</span><span style="float: right;">提现手续费：<strong><span class="red">@{{poundage}}</span></strong>%</span>
						<input type="number" v-model="user.money"  v-on:blur="moneyCase()" class="am-form-field am-radius i-radius" style="border-radius: 12px;" placeholder="请输入100的倍数"/>
					</div>
					
					<div  class="am-form-group am-form-icon">
						<span>收款类型(现目前仅支持银行卡)：</span>
						<input type="radio" v-model="user.beneficiary_name" name="types" value="银行卡"> 银行卡
					</div>
					
					<div  class="am-form-group am-form-icon">
						<!-- <i class="am-icon-yen" style="padding-top: 13px;"></i> -->
						<span>收款银行卡账号：</span><input type="number" v-model="user.collection_number" class="am-form-field am-radius" style="border-radius: 12px;"  placeholder="银行账号"/>
					</div>
					<div  class="am-form-group am-form-icon">
						<!-- <i class="am-icon-yen" style="padding-top: 13px;"></i> -->
						<span>具体开户行：</span><input type="text" v-model="user.ip" class="am-form-field am-radius" style="border-radius: 12px;"  placeholder="例：工商银行成都紫荆西路支行"/>
					</div>
					<div  class="am-form-group am-form-icon">
						<i class="am-icon-user" style="color:#329cd9;padding-top: 13px;"></i>
						<span>开户姓名：</span><input type="text" v-model="user.account_name" class="am-form-field am-radius" style="border-radius: 12px;" placeholder="开户人姓名"/>
					</div>
					
                    <div class="am-form-group am-form-icon">
                        <i class="am-icon-unlock-alt" ></i>
                        <input type="password" v-model="user.password" class="am-form-field am-radius" style="border-radius: 12px;" placeholder="商城支付密码">
                    </div>
					<div style="font-size: 16px;line-height: 35px;">{{Session::get('home_user')->phone}}</div>
					<div class="am-form-group am-form-icon posre">
						<i class="am-icon-user-ot"></i>
						<!-- <span>{{Session::get('home_user')->name}}</span> -->
						<input type="number" class="am-radius" v-model="user.name" placeholder="请输入验证码">
						<input :disabled="isDisabled" @click="getCode" :class="isDisabled?'deepBrown':'yz-code'" id="codeas" value="获取验证码"/>
					</div>

					<div class="am-modal am-modal-no-btn err-modal" tabindex="-1" id="err-modal">
						<div class="am-modal-dialog">
							<div class="am-modal-hd">错误
								<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
							</div>
							<div class="am-modal-bd">
								@{{errMsg}}
							</div>
							<div class="am-modal-bd">
								<button type="button" class="am-btn am-btn-danger am-round" @click='showErr()'>确认</button>
							</div>
						</div>
					</div>
					
                    注：周一至周五提现<span style="color: red;">T+3统一到账</span>遇节假日顺延.
                    <input type="hidden" value="1" name="paytype" id="paytype">
                    <p class="am-text-center"><button type="button"  v-if="status == 0"  class="am-btn am-btn-danger am-radius am-btn-block" v-on:click="add()" style="border-radius: 50px;border: none;" >确定</button></p>
                    <p class="am-text-center"><button type="button"  v-if="status == 1"  class="am-btn am-btn-danger am-radius am-btn-block"  disabled="disabled" style="border-radius: 50px;border: none;">加载中..</button></p>
                </form>
            </div>
        </div>
        <h3>提现记录</h3>
        <div class="withdrawals-panel">
            <table class="am-table am-table-striped am-table-hover comm-table">
                <thead>
                    <tr>
                        <th>金额</th>
						<th>状态</th>
						 <th>原因</th>
                        <th>申请日期</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="val in withdraw">
                        <td>@{{ val.money }}</td>
                        <td>
							<span style="color: red;" v-show="val.status == -1">驳回</span>
							<span style="font-weight: 600;" v-show="val.status == 0">处理中</span>
							<span style="color: green;" v-show="val.status == 1">成功</span>
						</td>
                        <td>@{{ val.remarks }}</td>
						<td>@{{ val.created_at }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--底部-->
    @include('Home.foot')
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '提现',
            user:{
                bank: 0,
				type:1,
				types:1,
				ip:'',
                money:'',                  //提现金额
                password:'',
				name: '',
				beneficiary_name:"银行卡",      //收款姓名
				collection_number:'',     //收款账号
				account_name:'',          //开户名
				password:'',              //密码
				withdrawal_type:2,    //提现类型

            },
            status:0,
            bank:[],
            withdraw:[],
			isDisabled: false,
			second: 0,
			errMsg: '',
			poundage:''
        },
        methods: {
            //初始化 系统管理员列表
            initialize: function () {
                $.post("/home/member/feeSetting", {'_token': '{{csrf_token()}}',class:'select'}, function (res) {
                    if (res.code) {
                       app.poundage = res.data.poundage;
                    } else {
                        layer.msg(res.data,{icon:7});
                    }
                });
            },
			
			payLog:function(){
				$.post("/home/member/withdrawpay", {'_token': '{{csrf_token()}}',class:'select'}, function (res) {
				    if (res.code) {
				       app.withdraw = res.data;
					   console.log(app.withdraw);
				    } else {
				        //layer.msg(res.data,{icon:7});
				    }
				});
			},
			moneyCase:function () {
				console.log(app.user.money)
				if(!(/^\+?[1-9][0-9]*$/.test((app.user.money / 100)))){
					layer.msg('请输入100的倍数');
					return false;
				}

			},
            add:function () {
                           // if( app.user.bank <= 0){
                           //     layer.msg('请选择银行卡');
                           //     return false;
                           // }
                           if(!(/^\+?[1-9][0-9]*$/.test((app.user.money / 100)))){
                               layer.msg('请输入100的倍数');
                               return false;
                           }
                           // if('{{ Session::get('home_user')->credit2}}' < parseFloat(app.user.money)){
                           //     layer.msg('可提现余额不足');
                           //     return false;
                           // }
                           if(app.user.password == ''){
                               layer.msg('请输入密码');
                               return false;
                           }
           				// if(app.user.name == ''){
           				//     layer.msg('请输入验证码');
           				//     return false;
           				// }
                           app.status = 1;
                           layer.msg('加载中', {
                               icon: 16
                               ,time:50000
                               ,shade: 0.01
                           });
                           $.post("/home/member/withdrawpay", {'_token': '{{csrf_token()}}',class:'add',user:app.user}, function (res) {
                               layer.closeAll('loading');
                               if (res.code) {
                                   app.status = 0;
                                   layer.msg(res.data,{icon:7});
                                   // this.initialize();
								   window.location.href="/home/member/index"
                               } else {
                                   app.status = 0;
                                   layer.msg(res.data,{icon:7});
                               }
                           });
                       },
			getCode: function (){
				let that = this;
				that.isDisabled = true;
				var second = 60;
				var codsas =  $('#codeas')

				codsas.attr("disabled", true);
				codsas.css("opacity", "0.8");
				var set = setInterval(function () {
					$('#codeas').val("(" + --second + "秒)后重新发送");
				},1000);
				app.codeGet();
				setTimeout(function () {
					$('#codeas').attr("disabled", false).val("重新发送");
					clearInterval(set);
				}, 60000);
			},
			codeGet: function () {
				var userIphon = '{{Session::get('home_user')->phone}}'
				console.log(userIphon)
				$.post('/home/member/yzxSms',{'_token':'{{csrf_token()}}', name: userIphon}, function (res) {
					console.log(res);
					if (res.code = 1) {
						layer.msg(res.data, {
						    icon: 1
						    ,time: 1000
						    ,shade: 0.01
						});
					} else {
					  layer.msg(res.data, {
					      icon: 2
					      ,time: 1000
					      ,shade: 0.01
					  });
					  return false;
					}
					return false;
				});
			}
        },
        //自动执行
        mounted: function () {
            this.initialize();
			this.payLog();
        },
    })
</script>
</html>
